Créer un tableau de données
Les tableaux de données HTML permettent de présenter des informations dans un tableau en deux dimensions.
Plusieurs balises servent à agencer un tableau :
- table : conteneur du tableau
- thead : conteneur de la ligne d'en-tête du tableau
- tbody : conteneur des lignes du tableau
- tr : conteneur d'une ligne du tableau
- td : une cellule dans une ligne
- th : une cellule d'en-tête pour un groupe de cellule (avec attribut scope pour indiquer si c'est l'en-tête d'une ligne ou d'une colonne)
<!-- Tableau de 5 lignes (tr) et 3 colonnes (td) -->
<table>
<thead>
<tr>
<th scope="col">Prénom</th>
<th scope="col">Age</th>
<th scope="col">Ville</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>40</td>
<td>Paris</td>
</tr>
<tr>
<td>Bob</td>
<td>29</td>
<td>Lyon</td>
</tr>
<tr>
<td>Jean</td>
<td>60</td>
<td>Dijon</td>
</tr>
<tr>
<td>Pierre</td>
<td>12</td>
<td>Bordeaux</td>
</tr>
</tbody>
</table>
/* Un peu de CSS pour avoir un tableau pas trop moche */
table{
border: 1px solid #BBB; /* Bordures autour du tableau */
border-collapse: collapse; /* Pas d'espaces entre les bordures des cellules */
}
table tr th,
table tr td
{
border: 1px solid #BBB; /* Bordures autour des cellules du tableau */
padding: 10px; /* Marge intérieure dans les cellules */
}
Résultat visuel de ce tableau :
| Prénom | Age | Ville |
|---|---|---|
| Alice | 40 | Paris |
| Bob | 29 | Lyon |
| Jean | 60 | Dijon |
| Pierre | 12 | Bordeaux |
Aller plus loin avec la doc du MDN : https://developer.mozilla.org/fr/docs/Web/HTML/Element/table